import { FC, memo } from 'react'

import LeftFooter from '../c-cnps/left-footer'
import LeftHeader from '../c-cnps/left-header'
import LeftContentContent from '../c-cnps/left-content'
import {
  LeftContentContentWrapper,
  LeftContentWrapper,
  LeftFooterWrapper,
  LeftHeaderWrapper
} from './style'
import { shallowEqualApp, useAppDispatch, useAppSelector } from '@/store'
import { setAsideWidthActions } from '@/store/module/options'

interface IState {
  children?: React.ReactNode
}

const LeftContent: FC<IState> = memo(() => {
  const dispatch = useAppDispatch()

  const { asideWidth } = useAppSelector(
    (state) => ({
      asideWidth: state.options.asideWidth
    }),
    shallowEqualApp
  )

  // 切换侧边栏宽度
  const changeAsideWidth = () => {
    dispatch(setAsideWidthActions(asideWidth === 200 ? 64 : 200))
  }

  return (
    <LeftContentWrapper $asideWidth={asideWidth}>
      <LeftHeaderWrapper>
        <LeftHeader asideWidth={asideWidth}></LeftHeader>
      </LeftHeaderWrapper>

      <LeftContentContentWrapper>
        <LeftContentContent></LeftContentContent>
      </LeftContentContentWrapper>

      <LeftFooterWrapper className="footer" onClick={changeAsideWidth}>
        <LeftFooter asideWidth={asideWidth}></LeftFooter>
      </LeftFooterWrapper>
    </LeftContentWrapper>
  )
})

export default LeftContent
